<template>
  <div>
    <div>
      <div  class="shangjuli" >
              <h2 id="myh">全国各省开通城市占比</h2>
      </div>
      <p @click=chakanchengshi id="xiaozibutton">查看具体开通城市</p>
<!--      <el-button type="text" @click=chakanchengshi id="xiaozibutton">查看具体开通城市</el-button>-->
      <!--echarts-->
      <div id="myecharts"></div>
      <!--右边表格-->
      <el-drawer title="" :visible.sync="table" direction="rtl" size="50%">
        <h3 id="juticity">具体开通城市</h3>
        <el-button type="primary" plain id="xinzengcity" @click="xinzengcity">新增城市</el-button>
        <el-table :data="dangqianyeTableData" id="choutibiao">
          <el-table-column property="id" label="编号" width="80px"></el-table-column>
          <el-table-column property="sheng" label="省" width="80px"></el-table-column>
          <el-table-column property="city" label="市" width="80px"></el-table-column>
          <el-table-column property="qu" label="具体区域" width="150px"></el-table-column>
          <el-table-column property="time" label="开通时间" width="170px"></el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" plain circle @click="shanchucity(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination :current-page='elPage' v-if="table" @current-change=elChangePage :page-size='pageSize' layout="prev, pager, next" :total="gridData.length">
        </el-pagination>
      </el-drawer>
      <!--新增城市-->
      <el-dialog title="新增城市" :visible.sync="xinzengcitykuang">
        <el-form>
          <el-form-item label="请选择省、市" :label-width="formLabelWidth">
            <el-select  placeholder="" v-model="xuanzesheng" class="xialakuang">
              <el-option v-for="item in mysheng" :key="item.province_id" :label="item.province_name" :value="item.province_id"></el-option>
            </el-select>
            <el-select  placeholder="" v-model="xuanzeshi" class="xialakuang">
              <el-option v-for="item in myweikaitongshi" :key="item.city_id" :label="item.city_name" :value="item.city_id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="xinzengcitykuang = false">取 消</el-button>
          <el-button type="primary" @click=quedingzengjia>确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>


</template>

<script>
  import * as api from '../../utils/api'
  export default {
    name: "city",
    created() {
      this.countshi()
      this.chasheng()
      this.chaquanbu()
    },
    mounted() {

    },
    computed:{
      dangqianyeTableData(){
        let kaishi = (this.elPage - 1) * this.pageSize;
        return this.gridData.slice(kaishi, kaishi+this.pageSize)
      }
    },
    data(){
      return{
        table: false,
        dialog: false,
        loading: false,
        gridData: [],
        echartsData:[],
        seriesDataNei:[],
        seriesDataWai:[],
        xinzengcitykuang: false,
        formLabelWidth:'120px',
        mysheng: [],
        myweikaitongshi: [],
        xuanzesheng:'',
        xuanzeshi:'',
        elPage:1,
        pageSize:5,
      }
    },
    watch:{
      //监听到渲染echarts所需要的数据有了过后就渲染echarts
      echartsData:function(){
        if (this.echartsData.length>0 && this.seriesDataNei.length>0){
          this.eacharts()
        }
      },
      seriesDataWai:function(){
        if (this.echartsData.length>0 && this.seriesDataNei.length>0){
          this.eacharts()
        }
      },
      //监听选择的省,然后查询未开通的市
      xuanzesheng:function () {
        // console.log('省发生了变化')
        // console.log(this.xuanzesheng)
        this.axios({
          url:api.GET_CHAWEIKAITONGSHI,
          methods: 'get',
          params:{
            province_id :this.xuanzesheng
          }
        }).then(data=>{
          // console.log('根据省查询的未开通市')
          this.myweikaitongshi = data.data.data
          // console.log(this.myweikaitongshi)
        })
      },
      //监听表格的显示与隐藏
      table:function () {
        if (this.table){
          document.getElementById("myecharts").style.marginLeft = 0
          document.getElementById("myh").style.marginLeft = '20%'
          document.getElementById("xiaozibutton").style.marginLeft = '25%'
        }else{
          document.getElementById("myecharts").style.marginLeft = '20%'
          document.getElementById("myh").style.marginLeft = '40%'
          document.getElementById("xiaozibutton").style.marginLeft = '45%'
          this.chaquanbu()

        }
      },
      //监听新增城市框的变化
      xinzengcitykuang:function () {
        if (!this.xinzengcitykuang){
          this.xuanzesheng = ''
          this.xuanzeshi = ''
        }
      },

    },
    methods:{
      //渲染echarts(查询每个省开通了多少个市)
      countshi(){
        this.axios({
          url:api.GET_QUERYALLCOUNT,
          methods: 'get',
          params:{

          }
        }).then(data=>{
          // console.log(data.data.data)
          this.seriesDataNei = data.data.data.slice(0,3)
          this.seriesDataWai = data.data.data.slice(3,data.data.data.length+1)
          // this.seriesDataWai = data.data.data
        })
      },
      //查询省
      chasheng(){
        this.axios({
          url:api.GET_CHASHENG,
          methods: 'get',
          params:{

          }
        }).then(data=>{
          // console.log(data)
          this.mysheng = data.data.data
          // console.log(this.mysheng)
          for (let i=0;i<data.data.data.length;i++){
            this.echartsData.push(data.data.data[i].province_name)
          }
          // console.log(this.echartsData)
        })
      },
      //echarts
      eacharts(){
        var echarts = require('echarts')
        var myCharts = echarts.init(document.getElementById("myecharts"));
        myCharts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            top:60,
            data:this.echartsData
          },
          grid:{

          },
          series: [
            {
              name: '重点省占比',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],

              label: {
                position: 'inner'
              },
              labelLine: {
                show: false
              },
              data: this.seriesDataNei
            },
            {
              name: '其他省占比',
              type: 'pie',
              radius: ['80%', '55%'],
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 5,
                // shadowBlur:3,
                // shadowOffsetX: 2,
                // shadowOffsetY: 2,
                // shadowColor: '#999',
                // padding: [0, 7],
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  // abg: {
                  //     backgroundColor: '#333',
                  //     width: '100%',
                  //     align: 'right',
                  //     height: 22,
                  //     borderRadius: [4, 4, 0, 0]
                  // },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              },
              data: this.seriesDataWai
            }
          ]
        })

      },
      //查询已开通的省市区
      chaquanbu(){
        this.gridData = []
        this.axios({
          url:api.GET_QUERYCITYALL,
          methods:'get',
          params:{

          }
        }).then(data=>{
          // console.log(data)
          // this.gridData = data.data.data
          // console.log(data.data.data)
          for (let i=0;i<data.data.data.length;i++){
            for (let j=0;j<data.data.data[i].city_name.length;j++){
              this.gridData.push(
                      {id:data.data.data[i].city_name[j].city_id,sheng:data.data.data[i].province_name,city:data.data.data[i].city_name[j].city_name,time:data.data.data[i].city_name[j].opening_time,qu:data.data.data[i].city_name[j].area_name.toString()}
              )
            }
          }
          // console.log(this.gridData)
        })
      },

      chakanchengshi(){
        this.table = true
      },
      //点击新增按钮
      xinzengcity(){
        this.xinzengcitykuang = true
      },
      //确定增加城市
      quedingzengjia(){
        this.xinzengcitykuang = false
        this.axios({
          url:api.GET_ADDCITY,
          methods: 'get',
          params:{
            cityId :this.xuanzeshi
          }
        }).then(data=>{
          // console.log('增加城市')
          // console.log(data)
          if (data.data.code === 200){
            this.chaquanbu()
            this.eacharts()
            this.$message({
              type: 'success',
              message: '添加城市成功'
            })
          }else{
            this.$message({
              type: 'info',
              message: '添加城市失败，请重新添加'
            })
          }
        })

      },
      //分页
      elChangePage(val) {
        // console.log('当前页是第'+ val +'页');
        this.elPage = val
      },
      //删除城市
      shanchucity(data){
        // console.log(data.id)
        this.$confirm('此操作将永久删除该城市, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.axios({
            url:api.GET_DELCITY,
            methods:'get',
            params:{
              cityId:data.id
            }
          }).then(data=>{
            // console.log(data)
            if (data.data.code === 200){
              this.chaquanbu()
              this.eacharts()
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            }else{
              this.$message({
                type: 'info',
                message: '删除失败，请重新删除'
              })
            }
          })


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  /deep/.el-table th>.cell {
    text-align: center;
  }
  /deep/.el-table .cell {
    text-align: center;
  }
  #myecharts{
    width: 60%;
    margin-left:20% ;
    height: 40rem;
    /*border: 1px solid red;*/
    /*margin-top: 2rem;*/
    transition: .5s all ease-in;
  }
  .el-drawer__header{
    margin-bottom: 0!important;
    padding: 0!important;
    width: 0;
    height: 0;
  }
  #el-drawer__title{
    margin-bottom: 0!important;
    padding: 0!important;
    width: 0;
    height: 0;
  }
  #juticity{
    margin: auto;
    text-align: center;
    font-size: 2rem;
    position: relative;
    top: -3rem;
    color: #818181;
  }
  #xinzengcity{
    /*position: relative;*/
    /*top: -1rem;*/
    /*left: -28rem;*/
    margin-left: 3rem;
    margin-bottom: 2rem;
  }
  .el-drawer.rtl{
    padding: 0 2rem;
  }
  #choutibiao{
    width: 100%;
    padding: 0 5%;
    margin: 0!important;
  }
  .el-dialog__wrapper{
    width: 90%!important;
  }
  .xialakuang{
    margin: 0 1rem;
  }
  .el-pagination{
    margin: 2rem auto 0 auto;
    text-align: center;
  }
  h2{
    margin: 3rem 0 0 0;
    color: #005377;
    width: 20%;
    margin-left: 40%;
    /*border: 1px solid red;*/
    transition: .5s all ease-in;
  }
  #xiaozibutton{
    width: 10%;
    /*border: 1px solid red;*/
    transition: .5s all ease-in;
    text-align: center;
    margin: auto;
    cursor: pointer;
    color: #4f91ff;
    margin-top: 1rem;
  }
  .dialog-footer{
    margin-right: 1rem;
    .el-button{
      margin: 0 2rem;
    }
  }
  #myh{
    width: 20%;
    text-align: center;
    /*border: 1px solid red;*/
    margin: auto;
  }
</style>